<template>
  <div class="container">
    <h2>分类管理</h2>
    
    <div class="category-form">
      <h3>{{ categoryModule.editingCategory ? '编辑分类' : '添加新分类' }}</h3>
      <div class="form-group">
        <label for="categoryName">分类名称:</label>
        <input id="categoryName" v-model="categoryModule.newCategory.name" placeholder="请输入分类名称" />
      </div>
      <div class="form-group">
        <label for="categoryDescription">分类描述:</label>
        <textarea id="categoryDescription" v-model="categoryModule.newCategory.description" placeholder="请输入分类描述"></textarea>
      </div>
      <button @click="saveCategory" class="btn">{{ categoryModule.editingCategory ? '更新分类' : '添加分类' }}</button>
      <button v-if="categoryModule.editingCategory" @click="cancelEdit" class="btn-warning">取消编辑</button>
    </div>
    
    <div class="category-list-container">
      <h3>分类列表</h3>
      <button @click="loadCategories" class="btn">刷新分类列表</button>
      <div class="loading" v-if="appModule.state.loading">加载中...</div>
      <div v-else>
        <div class="category-item" v-for="category in categories" :key="category.id">
          <div class="category-details">
            <strong>{{ category.id }} - {{ category.name }}</strong>
            <p>{{ category.description }}</p>
          </div>
          <div class="category-actions">
            <button @click="editCategory(category)" class="btn-warning btn-sm">编辑</button>
            <button @click="deleteCategory(category.id)" class="btn-danger btn-sm">删除</button>
          </div>
        </div>
        <div v-if="categories.length === 0">暂无分类数据</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['appModule'],
  data() {
    return {
      // 组件数据直接引用应用模块
    };
  },
  computed: {
    categoryModule() {
      return this.appModule.categoryModule;
    },
    categories() {
      return this.categoryModule.categories || [];
    }
  },
  methods: {
    async loadCategories() {
      try {
        await this.categoryModule.loadCategories();
      } catch (error) {
        this.appModule.state.error = error.message;
      }
    },
    async saveCategory() {
      this.appModule.state.error = '';
      
      // 验证输入
      if (!this.categoryModule.newCategory.name) {
        this.appModule.state.error = '请填写分类名称';
        return;
      }
      
      try {
        await this.categoryModule.saveCategory(this.categoryModule.newCategory);
        this.categoryModule.setEditingCategory(null);
      } catch (error) {
        this.appModule.state.error = error.message;
      }
    },
    editCategory(category) {
      this.categoryModule.setEditingCategory(category);
    },
    cancelEdit() {
      this.categoryModule.setEditingCategory(null);
    },
    async deleteCategory(categoryId) {
      if (!confirm('确定要删除这个分类吗？')) {
        return;
      }
      
      try {
        await this.categoryModule.deleteCategory(categoryId);
      } catch (error) {
        this.appModule.state.error = error.message;
      }
    }
  }
};
</script>
</file>